<template>
  <div style="position: relative">
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div
        v-if="isOutside == 1"
        class="tips-area tips-icon pub-m-t-30"
        style="margin-bottom: 20px"
        :style="{
          backgroundImage: `url(${require('_a/userImages/' +
            (colorType == 0
              ? 'tips-icon'
              : colorType == 1
              ? 'tips-icon-g'
              : colorType == 2
              ? 'tips-icon-b'
              : 'tips-icon-p') +
            '@2x.png')})`,
        }"
      >
        温馨提示：该域名为外部域名，根据域名实名政策要求，如本站的合作商需要实名的，北京荟米会将您的实名材料提交到合作商平台由合作商提交实名。
        您提交的管理操作均视为您同意授权我司代为操作，请知悉！
      </div>
      <div class="row-from pub-m-t-30">
        <div class="row-item">
          <div class="c-r row-name">域名:</div>
          <div class="row-value flx-row-s-c">
            <span>{{ dataInfo.domainName }}</span>
            <div
              class="user-strong-button btn"
              style="margin-left: 46px"
              @click="showModal"
            >
              查看证书
            </div>
            <span
              class="user-strong-button btn"
              style="margin-left: 25px"
              @click="downloadEvent"
              >下载证书</span
            >
          </div>
        </div>
        <div class="row-item">
          <div class="row-name">注册时间:</div>
          <div class="row-value">{{ dataInfo.registrationTime }}</div>
        </div>
        <div class="row-item">
          <div class="row-name">过期时间:</div>
          <div class="row-value">
            <span>{{ dataInfo.expireTime }}</span>
            <div
              class="user-strong-button btn"
              style="margin-left: 25px"
              @click="renew"
            >
              续费
            </div>
          </div>
        </div>
        <div class="row-item" style="align-items: flex-start; height: auto">
          <div class="row-name">域名状态:</div>
          <div class="row-value" style="display: flex; align-items: flex-start">
            <div>
              <div
                style="text-align: center"
                v-for="item in dataInfo.statusList"
                :key="item.name"
              >
                <span>{{ item.desc }}</span>
                <span style="color: #1c9cdf; margin-left: 10px"
                  >({{ item.name }})</span
                >
              </div>
            </div>
            <span
              class="btn"
              style="margin-left: 25px"
              @click="domainStatusClick"
              >域名状态说明</span
            >
          </div>
        </div>
        <div class="row-item">
          <div class="row-name">域名所有人:</div>
          <div class="row-value flx-row-s-c">
            <span>
              {{ dataInfo.owner }}
            </span>
            <div
              class="user-strong-button btn"
              style="margin-left: 25px"
              @click="goTransfer"
            >
              模板过户
            </div>
          </div>
        </div>
        <div class="row-item">
          <div class="row-name">实名证件类型:</div>
          <div class="row-value">{{ dataInfo.typeName }}</div>
        </div>
        <div class="row-item">
          <div class="row-name">实名证件号码:</div>
          <div class="row-value">{{ dataInfo.number }}</div>
        </div>
      </div>
    </div>
    <!-- 证书预览 -->
    <Modal
      v-model="showImage"
      draggable
      sticky
      :mask="false"
      :width="900"
      footer-hide
      title="预览证书"
    >
      <div class="content">
        <img :src="this.image" alt="" srcset="" />
      </div>
      <div class="modal-btn">
        <div class="btn-download" @click="download">下载证书</div>
      </div>
    </Modal>
    <!-- 域名状态 -->
    <Modal
      v-model="showDomainStatus"
      draggable
      sticky
      :mask="false"
      :width="900"
      footer-hide
      title="域名状态"
    >
      <div>
        <div class="row-from" style="padding-top: 0px">
          <div class="row-item">
            <div class="row-name">域名状态码:</div>
            <div
              class="row-value"
              style="
                text-align: center;
                color: rgba(61, 61, 61, 0.85);
                font-weight: bold;
              "
            >
              域名状态描述
            </div>
          </div>
        </div>
        <div class="content status">
          <div class="row-from" style="padding-top: 0px">
            <div
              class="row-item"
              v-for="item in dataInfo.domainStatusCaptionList"
              :key="item.name"
            >
              <div class="row-name">{{ item.name }}</div>
              <div class="row-value">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-btn">
        <div class="btn-download" @click="showDomainStatus = false">关闭</div>
      </div>
    </Modal>
    <Lodding :loading="loading" />
  </div>
</template>

<script>
import { changelocation } from "@/utils/location.js";
import { getDomainInfoById, getDownloadDomainPicById } from "@/api/bidding";
import { addToShoppingCart } from "@/api/user";
import Lodding from "_c/spin/loading";
export default {
  name: "dnDetail",
  components: {
    Lodding,
  },
  data() {
    return {
      breadCrumb: [{ name: "我的域名" }, { name: "域名详情" }],
      tablist: [
        {
          name: "域名信息",
          to: "/user/successbop",
        },
      ],
      colorType: 0,
      dataInfo: {},
      showImage: false,
      image: "",
      loading: false,
      showDomainStatus: false,
      isOutside: 0,
    };
  },
  mounted() {
    this.domainId = this.$route.params.domainId;
    this.title = this.$route.params.title;
    this.isOutside = this.$route.params.isOutside;
    this.retquestDomainInfoById();
  },
  methods: {
    async retquestDomainInfoById() {
      this.loading = true;
      const { code, data } = await getDomainInfoById({
        domainId: this.domainId,
      });
      this.loading = false;
      code === 200 && data && (this.dataInfo = data);
    },
    domainStatusClick() {
      this.showDomainStatus = true;
    },
    showModal() {
      if (this.image) {
        this.showImage = true;
        this.loading = false;
        return false;
      }
      this.retquestDownloadDomainPicById(true);
    },
    async retquestDownloadDomainPicById(isShow = false) {
      this.loading = true;
      const { code, data, message } = await getDownloadDomainPicById({
        domainId: this.domainId,
      });
      this.loading = false;
      if (code === 200) {
        this.image = data;
        isShow && (this.showImage = true);
      } else {
        this.$Message.warning(message);
      }
    },
    async downloadEvent() {
      if (!this.image) {
        await this.retquestDownloadDomainPicById();
      }
      this.download();
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    download() {
      let data = this.dataURLtoBlob(this.image);
      let type = data.type.split("/")[1];
      let imageUrl = URL.createObjectURL(data);
      var a = document.createElement("a");
      a.setAttribute("href", imageUrl);
      a.setAttribute("download", `${this.title}证书信息.${type}`);
      a.setAttribute("target", "_blank");
      let clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    },
    async renew() {
      this.loading = true;
      let res = await addToShoppingCart({
        tradeNames: [this.title],
        type: 1,
      });
      if (res.code == 200) {
        this.$Message.success("添加成功！");
        setTimeout(() => {
          let url = changelocation("/pro");
          window.open(url);
        }, 1000);
      }
      this.loading = false;
    },
    // 模板过户
    goTransfer() {
      this.$router.push({
        name: "templatetransfer",
        params: { dnList: [this.dataInfo.domainName] },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.row-from {
  .row-item {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    .row-name {
      width: 130px;
      padding-right: 29px;
      box-sizing: border-box;

      font-size: 16px;
      color: #000;
    }
    .row-value {
      flex: 1;
      font-size: 16px;
      color: #000;
      font-weight: 400;

      // span {
      //   font-size: inherit;
      //   color: inherit;
      //   font-weight: inherit;
      // }
      .btn {
        display: inline-table;
        width: 137px;
        line-height: 28px;
        font-size: 14px;
        border-radius: 5px;
        text-align: center;
        height: 28px !important;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
.content {
  width: 100%;
  height: 70vh;
  text-align: center;
  overflow-y: auto;
}
.content.status {
  height: 60vh;
}
.modal-btn {
  border-top: 1px solid #f7f7f7;
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  .btn-download {
    width: 100px;
    height: 38px;
    text-align: center;
    line-height: 36px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
    font-size: 18px;
    color: #fff;
    background-color: #f9521f;
  }
}
</style>
